<template>
  <div class="progress">
    <div class="progress-basic">
      <p class="progress-basic-title">圆弧进度条</p>
      <div class="progress-basic-content">
        <div class="progress-item flex">
          <div class="item">
            <p>基础进度条</p>
            <vc-progress type="ring" :value="20" />
          </div>
          <div class="item">
            <p>动画进度条</p>
            <vc-progress type="ring" :value="70" :animate="true" />
          </div>
          <div class="item">
            <p>圆角进度条</p>
            <vc-progress type="ring" :value="40" lineCap="round" />
          </div>
          <div class="item">
            <p>内嵌环进度条</p>
            <vc-progress type="ring" :value="40" innerBackground="rgba(0,0,0,0.1)" innerLineWidth="6" />
          </div>
        </div>
        <div class="progress-item flex">
          <div class="item">
            <p>加宽进度条</p>
            <vc-progress type="ring" :value="20" borderWidth="15" />
          </div>
          <div class="item">
            <p>保留两位小数</p>
            <vc-progress type="ring" :value="53.2312" :animate="true" percent="2" />
          </div>
          <div class="item">
            <p>设置初始步长和步进值</p>
            <vc-progress type="ring" :value="40" startStep="30" step="0.05" percent="2" :animate="true" :format="true" />
          </div>
          <div class="item">
            <p>自定义标题</p>
            <vc-progress type="ring" :value="0" innerBackground="rgba(0,0,0,0.1)" innerLineWidth="6" title="自定义标题" subTitle="" />
          </div>
        </div>
      </div>
    </div>
     <div class="progress-basic">
      <p class="progress-basic-title">仪表盘</p>
      <div class="progress-basic-content">
        <div class="progress-item flex">
          <div class="item" style="width:50%;">
            <p>基础仪表盘</p>
            <vc-progress type="dashboard" :value="20" />
          </div>
          <div class="item" style="width:50%;">
            <p>多段仪表盘</p>
            <vc-progress type="dashboard" :value="100" :color="colors" :backgroundColor="backgroundColor" />
          </div>
        </div>
        <div class="progress-item flex">
          <div class="item" style="width:50%;">
            <p>自定义标题</p>
            <vc-progress type="dashboard" :value="70" title="仪表盘" />
          </div>
          <div class="item" style="width:50%;">
            <p>自定义最大值</p>
            <vc-progress type="dashboard" :value="37.5" :maxValue="150" :color="colors" :backgroundColor="backgroundColor" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { CheckCircleFilled } from '@ant-design/icons-vue';
  const colors = [
    {
      offset:0.5,
      color:"rgba(255,0,0,0.5)"
    },
    {
      offset:1,
      color:"rgba(255,255,0,0.5)"
    }
  ]
  const backgroundColor = [
    {
      offset:0.5,
      color:"rgba(255,0,0,0.1)"
    },
    {
      offset:1,
      color:"rgba(255,255,0,0.1)"
    }
  ]
</script>

<style lang="less" scoped>
  .progress {
    &-basic {
      &-title {
        font-size: 18px;
        font-weight: 700;
        margin-left: 10px;
        margin-top: 15px;
      }
      &-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
      }
    }
    &-item {
      width: 50%;
      padding: 10px;
      .item {
        width: 25%;
        padding: 10px;
      }
    }
  }
</style>
